<template>
	<section>
		<!--工具条-->
		<el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
			<el-form :inline="true" :model="filters">
				<el-form-item>
					<el-input v-model="filters.keyword" placeholder="关键字"></el-input>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" v-on:click="search">查询</el-button>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" @click="handleAdd">新增</el-button>
				</el-form-item>
			</el-form>
		</el-col>

		<!--列表--
		 @row-click="activeDrawer" 行单击事件，activeDrawer（row）row表示当前行数据（规定死的）-->
		<el-table :data="dictionaryTypes" highlight-current-row v-loading="listLoading" @selection-change="selsChange" style="width: 100%;"
				  @row-dblclick="activeDrawer"
		>

			<!--dictionaryForm: {
					name
					tel
					registerTime
					state
					address
					logo

				},-->
			<el-table-column type="selection" width="55">
			</el-table-column>
			<el-table-column type="index" width="60">
			</el-table-column>
			<el-table-column prop="sn" label="类别编号" width="120" sortable>
			</el-table-column>
			<el-table-column prop="name" label="名字" width="180" sortable>
			</el-table-column>
<!--			<el-table-column label="子项" >
				<el-popover
						placement="right"
						width="400"
						trigger="click">
					<el-table :data="admins">
						<el-table-column prop="id" label="id" width="120" sortable>
						</el-table-column>
						<el-table-column prop="username" label="用户名" width="180" sortable>
						</el-table-column>
						<el-table-column label="操作" >
							<template scope="scope">
								<el-button size="small" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
								<el-button type="danger" size="small" @click="handleDel(scope.$index, scope.row)">删除</el-button>
								&lt;!&ndash;<el-button type="success" size="small" >子项</el-button>&ndash;&gt;
							</template>
						</el-table-column>
					</el-table>
					<el-button slot="reference">打开子项</el-button>
				</el-popover>
			</el-table-column>-->
			<el-table-column label="操作" >
				<template scope="scope">
					<el-button size="small" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
					<el-button type="danger" size="small" @click="handleDel(scope.$index, scope.row)">删除</el-button>
					<!--<el-button type="success" size="small" >子项</el-button>-->
				</template>
			</el-table-column>

		</el-table>

		<!--工具条-->
		<el-col :span="24" class="toolbar">
			<el-button type="danger" @click="batchRemove" :disabled="this.sels.length===0" >批量删除</el-button>
			<el-pagination layout="prev, pager, next"
						   @current-change="handleCurrentChange"
						   :page-size="pageSize"
						   :total="total"
						   :current-page="page"
						   style="float:right;">
			</el-pagination>
		</el-col>

		<!--编辑Type界面-->
		<el-dialog :title="title" :visible.sync="dictionaryFormVisible" :close-on-click-modal="false">
			<el-form :model="dictionaryForm" label-width="80px" :rules="dictionaryFormRules" ref="dictionaryForm" >
				<!--prop="name"  申明表单中有一个属性name-->
				<el-form-item label="产品编号" prop="sn">
					<el-input v-model="dictionaryForm.sn" auto-complete="off"></el-input>
				</el-form-item>
				<el-form-item label="名字" prop="name">
					<el-input v-model="dictionaryForm.name" auto-complete="off"></el-input>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click.native="dictionaryFormVisible = false">取消</el-button>
				<el-button type="primary" @click.native="dictionarySubmit" :loading="dictionaryLoading">提交</el-button>
			</div>

		</el-dialog>


		<el-drawer
				title="抽屉测试"
				:visible.sync="drawer"

		>
			<el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
				<el-form :inline="true" :model="filters">
					<el-form-item>
						<el-input v-model="detailfilters.detailkeyword" placeholder="关键字"></el-input>
					</el-form-item>
					<el-form-item>
						<el-button type="primary" v-on:click="searchDetails">查询</el-button>
					</el-form-item>
					<el-form-item>
						<el-button type="primary" @click="handleDetailAdd">新增</el-button>
					</el-form-item>
				</el-form>
			</el-col>
			<el-table :data="dictionaryDetails" highlight-current-row v-loading="listLoading" @selection-change="detailsselsChange" style="width: 100%;"
			>
				<el-table-column type="selection" width="55">
				</el-table-column>
				<el-table-column type="index" width="60">
				</el-table-column>
				<el-table-column prop="name" label="名字" width="180" sortable>
				</el-table-column>
				<el-table-column label="操作" >
					<template scope="scope">
						<el-button size="small" @click="handleDetailEdit(scope.$index, scope.row)">编辑</el-button>
						<el-button type="danger" size="small" @click="handleDetailDel(scope.$index, scope.row)">删除</el-button>
						<!--<el-button type="success" size="small" >子项</el-button>-->
					</template>
				</el-table-column>

			</el-table>
			<!--工具条-->
			<el-col :span="24" class="toolbar">
				<el-button type="danger" @click="detailbatchRemove" :disabled="this.detailsels.length===0" >批量删除</el-button>
				<el-pagination layout="prev, pager, next"
							   @current-change="handleDetailCurrentChange"
							   :page-size="pageSize"
							   :total="detailtotal"
							   :current-page="detailpage"
							   style="float:right;">
				</el-pagination>
			</el-col>
			<!--编辑detail页面-->
			<el-dialog :title="title"
					   :visible.sync="dictionaryDetailsFormVisible"
					   :close-on-click-modal="false"
					   :append-to-body="true">
				<el-form :model="dictionaryDetailsForm" label-width="80px" :rules="dictionaryDetailsFormRules" ref="dictionaryDetailsForm" >
					<!--prop="name"  申明表单中有一个属性name-->
					<el-form-item label="名字" prop="name">
						<el-input v-model="dictionaryDetailsForm.name" auto-complete="off"></el-input>
					</el-form-item>
				</el-form>
				<div slot="footer" class="dialog-footer">
					<el-button @click.native="dictionaryDetailsFormVisible = false">取消</el-button>
					<el-button type="primary" @click.native="dictionaryDetailsSubmit" :loading="dictionaryDetailsLoading">提交</el-button>
				</div>

			</el-dialog>
		</el-drawer>
	</section>
</template>

<script>
	import util from '../../common/js/util'
	//import NProgress from 'nprogress'
	//import { getDictionaryListPage, removeDictionary, batchRemoveDictionary, dictionaryDictionary, addDictionary } from '../../api/api';

	export default {
		data() {
			return {
                type_id:null,
                drawer: false,
				filters: {
                    keyword: ''
				},
				detailfilters: {
                    detailkeyword: ''
				},
                title:"",
                dictionaryTypes: [],
                dictionaryDetails: [],
				total: 0,
                detailtotal: 0,
				page: 1,
				detailpage:1,
                pageSize: 5,
				listLoading: false,
				sels: [],//列表选中列
				detailsels: [],//列表选中列
				detailquery:null,

				dictionaryFormVisible: false,//编辑界面是否显示
				dictionaryDetailsFormVisible: false,//编辑界面是否显示
				dictionaryLoading: false,
				dictionaryDetailsLoading: false,
				dictionaryFormRules: {
					name: [
						{ required: true, message: '请输入名称', trigger: 'blur' }
					]
				},
				dictionaryDetailsFormRules: {
					name: [
						{ required: true, message: '请输入名称', trigger: 'blur' }
					]
				},
				//编辑界面数据
				dictionaryForm: {
                    id:null,
					sn:null,
                    name:""
                },
				//Detail编辑界面数据
				dictionaryDetailsForm: {
                    id:null,
                    name:"",
                    types_id:null
                },

                addFormVisible: false,//新增界面是否显示
                addLoading: false,
                addFormRules: {
                    //验证规则
                    name: [
                        { required: true, message: '请输入姓名', trigger: 'blur' }
                    ]
                },
			}
		},
		methods: {
		    activeDrawer(row){
		        this.detailpage = 1,
				this.detailfilters.detailkeyword = null,
		        this.drawer = true;
                let para = {
                    currentPage: this.detailpage,
                    keyword: this.detailfilters.detailkeyword,
                    pageSize:this.pageSize,
                    types_id: row.id
                };
                this.types_id = row.id;
                this.getDictionaryDetailByTypeId(para)

		        //alert("触发了单击事件");
		        //console.log("触发了打印到控制台");
			},
            search(){
		        this.page = 1;
                this.getDictionary();
			},
            searchDetails(){
                let para2 = {
                    currentPage: this.detailpage,
                    keyword: this.detailfilters.detailkeyword,
                    pageSize:this.pageSize,
                    types_id: this.types_id
                };
                console.log("查询出来的types_id" + this.types_id)
                this.getDictionaryDetailByTypeId(para2);
			},
			handleCurrentChange(val) {
				this.page = val;
				this.getDictionary();
			},
			handleDetailCurrentChange(val) {
				this.detailpage = val;
				this.searchDetails();
			},
			//员工列表
			getDictionary() {
				let para = {
					currentPage: this.page,
                    keyword: this.filters.keyword,
                    pageSize:this.pageSize
				};
				this.$http.post("/dictionarytype",para)
					.then(result=>{
					    //alert("请求成功有数据")
						result = result.data;//PageList{count dictionarylist}
						console.log(result);// 看看数据到这里没有
						this.dictionaryTypes = result.list;
						this.total = result.count;
					})
					.catch(result=>{
					    console.log(result);
					})
			},
            getDictionaryDetailByTypeId(para) {

				this.detailquery = para;
				//alert("抽屉拿到的id"+row.id)
				this.$http.post("/dictionarydetail",para)
					.then(result=>{
					    //alert("请求成功有数据")
						result = result.data;//PageList{count dictionarylist}
						console.log(result);// 看看数据到这里没有
						this.dictionaryDetails = result.list;
						this.detailtotal = result.count;
					})
					.catch(result=>{
					    console.log(result);
					})
			},
            getDictionarys() {
                this.$http.get("/dictionarytype")
                    .then(result=>{
                        //alert("请求成功有数据")
                        console.log(result);// 看看数据到这里没有
                        this.dictionaryTypes = result.data;
                    })
                    .catch(result=>{
                        console.log(result);
                    })
            },
			//删除
            handleDel: function (index, row) {
		        console.log("调用删除");
				this.$confirm('确认删除该记录吗?', '提示', {
					type: 'warning'
				}).then(() => {
				    console.log("点击确认");
					console.log("要删除的id" + row.id)
					this.$http.delete("/dictionarytype/"+row.id)
						.then(result=>{
						    result = result.data;
						    if (result.success){
                                this.$message({
                                    message: '删除成功',
                                    type: 'success'
                                });
                                this.page = 1;
                                this.getDictionary();
                                //this.getDictionary();
							} else {
                                this.$message({
                                    message: '删除失败',
                                    type: 'error'
                                });
							}
						})
						.catch(result=>{
                            this.$message({
                                message: '删除失败',
                                type: 'error'
                            });
						})

                }).catch(() => {
				});


            },
			//detail删除
			handleDetailDel: function (index, row) {
				this.$confirm('确认删除该记录吗?', '提示', {
					type: 'warning'
				}).then(() => {
					this.listLoading = true;
					//NProgress.start();
					let para = { id: row.id };
					console.log("要删除的id" + para.id)
					this.$http.delete("/dictionarydetail/"+para.id)
						.then(result=>{
						    result = result.data;
						    if (result.success){
                                this.$message({
                                    message: '删除成功',
                                    type: 'success'
                                });
                                this.detailpage = 1;
                                this.searchDetails();
							} else {
                                this.$message({
                                    message: '删除失败',
                                    type: 'error'
                                });
							}
						})
						.catch(result=>{
                            this.$message({
                                message: '删除失败',
                                type: 'error'
                            });
						})
                    this.listLoading = false;

                }).catch(() => {
				});


            },
			//显示编辑界面
			handleEdit: function (index, row) {
                // 只能显示两级（选择框限制）
			    this.title="编辑";
				this.dictionaryFormVisible = true;
				this.dictionaryForm = Object.assign({}, row);


			},
			//显示Details编辑界面
			handleDetailEdit: function (index, row) {
                // 只能显示两级（选择框限制）
			    this.title="编辑";
				this.dictionaryDetailsFormVisible = true;
				this.dictionaryDetailsForm = Object.assign({}, row);


			},
			//显示新增界面
			handleAdd: function () {
                this.title="添加";
				this.dictionaryFormVisible = true;
				// 清空表单，否则关闭编辑界面后数据会保留
				this.dictionaryForm = {
                    id:null,
                    sn:null,
                    name:"",
                };
			},
			handleDetailAdd: function () {
                this.title="添加";
				this.dictionaryDetailsFormVisible = true;
				// 清空表单，否则关闭编辑界面后数据会保留
				this.dictionaryDetailsForm = {
                    id:null,
                    name:"",
					types_id:null
                };
			},
			//编辑
			dictionarySubmit: function () {
				this.$refs.dictionaryForm.validate((valid) => {
					if (valid) {
						this.$confirm('确认提交吗？', '提示', {}).then(() => {
							this.dictionaryLoading = true;
							//NProgress.start();
							let para = Object.assign({}, this.dictionaryForm);

							this.$http.put("/dictionarytype",para)
								.then(result=>{
								    result = result.data;
									if (result.success){
                                        this.$message({
                                            message: '提交成功',
                                            type: 'success'
                                        });
                                        this.dictionaryLoading = false;
                                        this.dictionaryFormVisible = false;
                                        this.getDictionary();
									} else {
                                        this.dictionaryLoading = false;//关闭忙等框
                                        this.$message({
                                            message: '操作失败',
                                            type: 'error'
                                        });
									}
								})
								.catch(result=>{
                                    this.dictionaryLoading = false;//关闭忙等框
                                    this.$message({
                                        message: '操作失败',
                                        type: 'error'
                                    });
								})

						});
					}
				});
			},
            dictionaryDetailsSubmit: function () {
				this.$refs.dictionaryDetailsForm.validate((valid) => {
					if (valid) {
						this.$confirm('确认提交吗？', '提示', {}).then(() => {
							this.dictionaryDetailsLoading = true;
							let detailpara = Object.assign({}, this.dictionaryDetailsForm);
                            detailpara.types_id = this.types_id;
							this.$http.put("/dictionarydetail",detailpara)
								.then(result=>{
								    result = result.data;
									if (result.success){
                                        this.$message({
                                            message: '提交成功',
                                            type: 'success'
                                        });
                                        this.dictionaryDetailsLoading = false;
                                        this.dictionaryDetailsFormVisible = false;
                                        this.searchDetails();
									} else {
                                        this.dictionaryDetailsLoading = false;//关闭忙等框
                                        this.$message({
                                            message: '操作失败',
                                            type: 'error'
                                        });
									}
								})
								.catch(result=>{
                                    this.dictionaryDetailsLoading = false;//关闭忙等框
                                    this.$message({
                                        message: '操作失败',
                                        type: 'error'
                                    });
								})

						});
					}
				});
			},
			selsChange: function (sels) {
				this.sels = sels;
			},
			detailsselsChange: function (sels) {
				this.detailsels = sels;
			},
			//批量删除
			batchRemove: function () {
				var ids = this.sels.map(item => item.id);
				//alert(ids);
				this.$confirm('确认删除选中记录吗？', '提示', {
					type: 'warning'
				}).then(() => {
					this.listLoading = true;
					//NProgress.start();

                    this.$http.patch("/dictionarytype",ids)
                        .then(result=>{
                            result = result.data;
                            if (result.success){
                                this.$message({
                                    message: '删除成功',
                                    type: 'success'
                                });
                            } else {
                                this.$message({
                                    message: '删除失败',
                                    type: 'error'
                                });
                            }
                            this.page = 1;
                            this.getDictionary();
                        })
                        .catch(result=>{
                            this.$message({
                                message: '删除失败',
                                type: 'error'
                            });
                            this.page = 1;
                            this.getDictionary();
                        })

                    this.listLoading = false;
				}).catch(() => {

				});
			},
			//批量删除
            detailbatchRemove: function () {
				var ids = this.detailsels.map(item => item.id);
				//alert(ids);
				this.$confirm('确认删除选中记录吗？', '提示', {
					type: 'warning'
				}).then(() => {
					this.listLoading = true;
					//NProgress.start();
                    let para = {ids: ids,types_id:this.types_id}
                    this.$http.patch("/dictionarydetail",para)
                        .then(result=>{
                            result = result.data;
                            if (result.success){
                                this.$message({
                                    message: '删除成功',
                                    type: 'success'
                                });
                            } else {
                                this.$message({
                                    message: '删除失败',
                                    type: 'error'
                                });
                            }
                            this.page = 1;
                            this.searchDetails();
                        })
                        .catch(result=>{
                            this.$message({
                                message: '删除失败',
                                type: 'error'
                            });
                            this.page = 1;
                            this.getDictionary();
                        })

                    this.listLoading = false;
				}).catch(() => {

				});
			},


		},

		mounted() {
			this.getDictionary();
		}
	}

</script>

<style scoped>


</style>